<template>
	<view class="canvas_view">
		<meta name="referrer" content="no-referrer">
		<view class="image">
			<image :src="bgImg" mode="scaleToFill"></image>
			<view class="rule">
				<view class="rule_title"></view>
				<view class="rule_text"></view>
			</view>
			<canvas class="canvas" id="new_canvas" canvas-id="new_canvas"></canvas>
			<canvas class="canvas" id="canvas" canvas-id="canvas" @touchstart="touchstart" @touchmove="touchmove"></canvas>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgImg:'/static/scrape/guabg.png',//تەگلىك رەسىم
				Icon:'/static/scrape/guabg.png',//سۇ باسما رەسىم
				Num:this.randNumber(),
				viewWidth: 0,
				viewHeight: 0,
				ctx: null,
				x: [],
				y: [],
				points: []
			}
		},
		mounted() {
			this.drawInit()
			this.new_drawInit();
		},
		methods: {
			touchstart(e) {
				let startX = e.changedTouches[0].x;
				let startY = e.changedTouches[0].y;
				let startPoint = {
					x: startX,
					y: startY
				};
				//نوقتا
				this.points.push(startPoint);
				//نوقتا داۋاملاشتۇرۇش
				this.ctx.beginPath();
			},
			touchmove(e) {
				let moveX = e.changedTouches[0].x
				let moveY = e.changedTouches[0].y
				let movePoint = {
					x: moveX,
					y: moveY,
				}
				this.points.push(movePoint)
				if (this.points.length >= 2) {
					this.drawLine()
				}
			},
			// رەسىم ئۇچۇرىغا ئىرشىش
			getViewHW() {
				let info = uni.createSelectorQuery().in(this).select(".image");
				return new Promise((resolve, reject) => {
					info.boundingClientRect((data) => {
						this.viewWidth = data.width
						this.viewHeight = data.height
						resolve()
					}).exec(function(res) {
						// console.log(res);
					})
				})
			},
			drawLine() {
				let points1 = this.points[0]
				let points2 = this.points[1]
				this.points.shift()
				this.ctx.moveTo(points1.x, points1.y)
				this.ctx.lineTo(points2.x, points2.y)
				this.ctx.setFontSize(30)
				this.ctx.setTextBaseline('middle')
				this.ctx.setFillStyle('black')
				this.ctx.setTextAlign('center')
				this.ctx.stroke()
				this.ctx.draw(true)
			},
			//1-canvas
			async new_drawInit(){
				const myFont = new FontFace('AlpidaUnicodeSystem', 'url(./static/css/Alpida-Unicode-System.ttf)')
				this.ctx = uni.createCanvasContext('new_canvas')
				this.ctx.font = 'bold 35px AlpidaUnicodeSystem'
				this.ctx.setTextBaseline('middle')
				this.ctx.setFillStyle('white')
				this.ctx.setTextAlign('center')
				
				this.ctx.fillText(this.randNumber(), 75, 195, 80, 80);
				this.ctx.fillText(this.randNumber(), 195, 195, 80, 80);
				this.ctx.fillText(this.randNumber(), 315, 195, 80, 80);
				
				this.ctx.fillText(this.randNumber(), 75, 295, 80, 80);
				this.ctx.fillText(this.randNumber(), 195, 295, 80, 80);
				this.ctx.fillText(this.randNumber(), 315, 295, 80, 80);
				
				this.ctx.fillText(this.randNumber(), 75, 395, 80, 80);
				this.ctx.fillText(this.randNumber(), 195, 395, 80, 80);
				this.ctx.fillText(this.randNumber(), 315, 395, 80, 80);
					
				this.ctx.fillText('مۇكاپات نۇمۇرى : '+this.randNumber(), 200, 495, 500, 100);
				this.ctx.fillText('شاتلىق لاتارىيەسى', 250, 75, 500, 100);	
				
				this.ctx.draw(true)
			},
			//2-canvas
			async drawInit() {
				await this.getViewHW()
				this.ctx = uni.createCanvasContext('canvas')
				let x = this.viewWidth
				let y = this.viewHeight

				this.ctx.drawImage(this.Icon, 40, 150, 80, 80);
				this.ctx.drawImage(this.Icon, 160, 150, 80, 80);
				this.ctx.drawImage(this.Icon, 280, 150, 80, 80);
				
				this.ctx.drawImage(this.Icon, 40, 250, 80, 80);
				this.ctx.drawImage(this.Icon, 160, 250, 80, 80);
				this.ctx.drawImage(this.Icon, 280, 250, 80, 80);
				
				this.ctx.drawImage(this.Icon, 40, 350, 80, 80);
				this.ctx.drawImage(this.Icon, 160, 350, 80, 80);
				this.ctx.drawImage(this.Icon, 280, 350, 80, 80);
				
				this.ctx.draw(true)
				//ئۇسلۇب
				this.ctx.lineWidth = 40; //چوڭ كىچكلىكى
				this.ctx.lineCap = "round"
				this.ctx.lineJoin = "round"
				this.ctx.globalCompositeOperation = 'destination-out'
			},
			randNumber(){
				var number = Math.floor(Math.random()*100-1)+1;
				if(number == 0){
					number = Number(number+1);
				}
				if(number < 10) {
				    number = "0" + number;
				}
				return number;
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #cc232a;
	}
	.canvas_view {
		width: 100%;
		height: 100%;
		text-align: center;
		.image {
			position: relative;
			width: 100%;
			height: 1080rpx;
			image {
				height: 100%;
				width: 100%;
			}
			.canvas {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}
		}
	}
	.rule{
		direction: rtl;
		padding: 5px;
		text-align: right;
		color: white;
	}
	.rule_title{
		font-weight: bold;
		font-size: 22px;
	}
	.rule_text{
		text-align: justify;
		font-size: 16px;
	}
</style>